<template>
    <ManageCard ref="manageCard" :numberOfEntries="bodyData.totalElements" @fulsh="getBodyData"
        @currentChange="currentChange" @clickOfAddBtn="clickOfAddBtn" :page-size="requestParam.pageSize"
        :page-number="requestParam.pageNumber">
        <el-table cell-class-name="cell-class" max-height="calc(100% - 20px)" :data="bodyData.content"
            style="width: 100%;">
            <!-- 序号 -->
            <el-table-column type="index" width="60px"></el-table-column>
            <!-- 用户id -->
            <el-table-column label="用户id" width="200px">
                <template #header>
                    <div class="item-title">{{ pageDict.userId }}</div>
                    <div><el-input v-model="requestParam.data.and.eq[0].id" :placeholder="store.appFront.search" size="mini"
                            clearable @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.id }}</div>
                </template>
            </el-table-column>
            <!-- 用户名 -->
            <el-table-column label="用户名" width="200px">
                <template #header>
                    <div class="item-title">{{ pageDict.username }}</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].username" :placeholder="store.appFront.search"
                            size="mini" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;" v-if="scope.row.username != null && scope.row.username != ''">{{
                        scope.row.username }}</div>
                    <div class="no" v-else>{{ store.appFront.noData }}</div>
                </template>
            </el-table-column>

            <!-- 用户昵称 -->
            <el-table-column label="用户昵称" width="200px">
                <template #header>
                    <div class="item-title">{{ pageDict.userNickname }}</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].nickname" :placeholder="store.appFront.search"
                            size="mini" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;" v-if="scope.row.nickname != null && scope.row.nickname != ''">{{
                        scope.row.nickname }}</div>
                    <div v-else class="no">{{ store.appFront.noData }}</div>
                </template>
            </el-table-column>

            <!-- 用户邮箱 -->
            <el-table-column label="用户邮箱" width="200px">
                <template #header>
                    <div class="item-title">{{ pageDict.userEmail }}</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].email" :placeholder="store.appFront.search"
                            size="mini" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;" v-if="scope.row.email != null && scope.row.email != ''">{{
                        scope.row.email }}</div>
                    <div v-else class="no">{{ store.appFront.noData }}</div>
                </template>
            </el-table-column>

            <!-- 用户电话 -->
            <el-table-column label="用户电话" width="200px">
                <template #header>
                    <div class="item-title">{{ pageDict.userPhone }}</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].phone" :placeholder="store.appFront.search"
                            size="mini" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;" v-if="scope.row.phone != null && scope.row.phone != ''">{{
                        scope.row.phone }}</div>
                    <div v-else class="no">{{ store.appFront.noData }}</div>
                </template>
            </el-table-column>

            <!-- 用户角色 -->
            <el-table-column label="用户角色" width="300px">
                <template #header>
                    <div class="item-title">{{ pageDict.userRoles }}</div>
                    <el-select style="width: 100%;" v-model="requestParam.data.and.eq[0].roles[0].code"
                        placeholder="请选择用户角色" size="mini" @change="getBodyData">
                        <el-option :key="null" :label="store.appFront.all" :value="null">
                        </el-option>
                        <el-option v-for="item in roleList" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">
                        <template v-if="scope.row.roles.length == 0">
                            <div class="no">{{ store.appFront.noData }}</div>
                        </template>
                        <template v-else>
                            <el-tag style="margin: 2px;" v-for="item in scope.row.roles" :key="item.id" type="info">{{
                                item.name }}</el-tag>
                        </template>
                    </div>
                </template>
            </el-table-column>

            <!-- 创建时间 -->
            <el-table-column width="300px">
                <template #header>
                    <div class="item-title">{{ store.appFront.createTime }}</div>
                    <!-- 时间选择器 -->
                    <div style="width: 100%;text-align: center;">
                        <!-- 开始时间 -->
                        <el-date-picker style="width: 100px;" v-model="requestParam2.createStart" type="datetime"
                            size="mini" :placeholder="store.appFront.startTime" @change="getBodyData">
                        </el-date-picker>
                        <!-- 结束时间 -->
                        <el-date-picker style="width: 100px;" v-model="requestParam2.createEnd" type="datetime" size="mini"
                            :placeholder="store.appFront.endTime" @change="getBodyData">
                        </el-date-picker>

                    </div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;">{{ $kt.date.gmt2Local(scope.row.gmtCreate, "yyyy-MM-dd HH:mm:ss")
                    }}</div>
                </template>
            </el-table-column>



            <!-- 操作，固定位置 -->
            <el-table-column fixed="right" :width="'125px'">
                <template #default="scope">
                    <el-button type="text" ref="editButton" size="small" @click="dialogOfSaveInTableCard.open(scope.row)">
                        <el-icon :size="15">
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-popconfirm width="200px" :title="store.appFront.deletePrompt"
                        :confirm-button-text="store.appFront.confirm" :cancel-button-text="store.appFront.cancel"
                        @confirm="toDelete(scope.row)">
                        <template #reference>
                            <el-button type="text" ref="deleteButton" style="color: #f56c6c" size="small">
                                <el-icon :size="15">
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>
    </ManageCard>
    <DialogOfSaveInTableCard ref="dialogOfSaveInTableCard" :requestParam="requestParam" />
</template>

<script lang="ts" setup>
import DialogOfSaveInTableCard from './DialogOfSaveInTableCard.vue';
import { ref, defineExpose, onMounted } from 'vue';
import $kt from '@/vueKantboot';
import { useStore } from '@/stores/counter';
import ManageCard from '@/views/manage/components/ManageCard.vue';

let store = useStore();

let byteLength = (str: string) => {
    return str.replace(/[^x00-xFF]/g, '**').length;
}
let dialogOfSaveInTableCard = ref();
let manageCard = ref();
let requestParam2 = ref({
    createStart: null,
    createEnd: null,
});

let requestParam = ref(
    {
        "pageNumber": 1,
        "pageSize": 10,
        "sortType": "DESC",
        "sortField": "gmtCreate",
        "data": {
            "and": {
                "eq": [{
                    "id": "",
                    "roles": [{
                        "code": null
                    }]
                }],
                "vague": [
                    {
                        "username": "",
                        "nickname": "",
                        "email": "",
                        "phone": ""
                    },
                ],
                "like": [],
                "gt": [],
                "lt": [],
                "ge": [
                    {
                        gmtCreate: null
                    }
                ],
                "le": [
                    {
                        gmtCreate: null
                    }
                ]
            },
            "or": {
                "eq": [],
                "like": [],
                "gt": [],
                "lt": [],
                "ge": [],
                "le": []
            },
            "entity": {},
            "notNull": [],
            "isNull": []
        }
    }
);

let bodyData = ref({
    "number": 1,
    "size": 5,
    "totalPage": 0,
    "totalElements": 0,
    "gmtModified": "2023-04-10 17:02:26",
    "content": [{
        "id": 405512694530053,
        "password": "736676f60c3b49b1812b919f9f40d8de.aea8278808a21d5c9bc8e8e507b696cd",
        "roles": [
            {
                "code": "systemAdmin",
                "gmtModified": "2023-04-10 16:58:25",
                "name": "系统管理员"
            },
            {
                "code": "admin",
                "gmtModified": "2023-04-10 16:58:25",
                "name": "管理员"
            },
            {
                "code": "developer"
            }
        ],
        "username": "admin"
    }],
});

let groupCodeSelected = ref('');

let roleList = ref([{
    "code": "systemAdmin",
    "name": "系统管理员"
}]);

let getRoleList = () => {
    $kt.request.request({
        url: '/adminManage/system/role/getList',
        method: 'post',
        data: {},
    }).then((res: any) => {
        roleList.value = res.data.data;
    });
};



getRoleList();


let toDelete = (item: any) => {
    $kt.request.request({
        url: '/adminManage/system/user/delete',
        method: 'post',
        data: item,
    }).then((res: any) => {
        getBodyData();
    });
};

let getBodyData = () => {

    if (requestParam2.value.createStart != null && requestParam2.value.createStart != "") {
        requestParam.value.data.and.ge[0].gmtCreate = $kt.date.local2Gmt(requestParam2.value.createStart).getTime();
    } else {
        requestParam.value.data.and.ge[0].gmtCreate = null;
    }
    if (requestParam2.value.createEnd != null && requestParam2.value.createEnd != "") {
        requestParam.value.data.and.le[0].gmtCreate = $kt.date.local2Gmt(requestParam2.value.createEnd).getTime();
    } else {
        requestParam.value.data.and.le[0].gmtCreate = null;
    }


    $kt.request.request({
        url: '/adminManage/system/user/getPage',
        method: 'post',
        data: requestParam.value,
    }).then((res: any) => {
        bodyData.value = res.data.data;
    });
};

let currentChange = (val: any) => {
    requestParam.value.pageNumber = val;
    getBodyData();
};
getBodyData();

let clickOfAddBtn = () => {
    dialogOfSaveInTableCard.value.open();
};

let pageDict = ref({
    "userId": "用户ID",
    "userNickname": "用户昵称",
    "userPhone": "用户手机号",
    "username": "用户名",
    "userEmail": "用户邮箱",
    "userPassword": "用户密码",
    "userRoles": "用户角色",
});

const getPageDict = async (code: string) => {
    return await $kt.request.request({
        url: "/system/page/getDictMap",
        method: "post",
        data: { code }
    });
}

getPageDict("adminManageUserManage").then((res: any) => {
    pageDict.value = res.data.data;
});

store.$onAction((json) => {
    if (json.name == "setLanguageCode") {
        getBodyData();
        getRoleList();
        getPageDict("adminManageUserManage").then((res: any) => {
            pageDict.value = res.data.data;
        });
    }
});
defineExpose({
});
</script>


<style lang="scss" scoped>
.card {
    position: relative;
    height: 100%;
    box-shadow: none;
    border: 2px solid #ebeef5;
}

.title {
    color: #666666;
    text-align: center;
}

.cell-class {
    cursor: pointer;
}

.refresh:active {
    transform: rotate(45deg);
}

.no {
    color: #999999;
    text-align: center;
}

.item-title {
    text-align: center;
}
</style>